<!-- htmlhint doctype-first:false, tag-pair:false -->
<script>
window.createToolsController = function() {
  return {
    timeRange: 24,
    limit: 20,
    charts: {},
    loading: false,
    error: null,
    summaryCards: {
      slowest: null,
      mostErrorProne: null,
      mostUsed: null,
      overallHealth: 'good'
    },
    async init() {
      await this.loadAllMetrics();
      this.startAutoRefresh();
    },
    async loadAllMetrics() {
      this.loading = true;
      this.error = null;
      try {
        await Promise.all([
          this.loadToolUsage(),
          this.loadToolPerformance(),
          this.loadToolErrors(),
          this.loadToolChains(),
          this.loadToolSlowness(),
          this.loadToolErrorProne(),
        ]);
      } catch (e) {
        console.error('Failed to load tool metrics:', e);
        this.error = e.message;
      } finally {
        this.loading = false;
      }
    },
    async loadToolUsage() {
      const response = await fetch(
        `{{ root_path }}/admin/observability/tools/usage?hours=${this.timeRange}&limit=${this.limit}`
      );
      if (!response.ok) throw new Error('Failed to load tool usage');
      const data = await response.json();
      this.renderToolUsageChart(data);

      // Update most used card
      if (data.tools && data.tools.length > 0) {
        this.summaryCards.mostUsed = {
          name: data.tools[0].tool_name,
          value: data.tools[0].count,
          metric: 'invocations'
        };
      }
    },
    async loadToolPerformance() {
      const response = await fetch(
        `{{ root_path }}/admin/observability/tools/performance?hours=${this.timeRange}&limit=${this.limit}`
      );
      if (!response.ok) throw new Error('Failed to load tool performance');
      const data = await response.json();
      this.renderToolPerformanceTable(data);

      // Update slowest tool card
      if (data.tools && data.tools.length > 0) {
        const slowest = [...data.tools].sort((a, b) => b.p95 - a.p95)[0];
        this.summaryCards.slowest = {
          name: slowest.tool_name,
          value: slowest.p95,
          metric: 'ms (p95)'
        };
      }
    },
    async loadToolErrors() {
      const response = await fetch(
        `{{ root_path }}/admin/observability/tools/errors?hours=${this.timeRange}&limit=${this.limit}`
      );
      if (!response.ok) throw new Error('Failed to load tool errors');
      const data = await response.json();
      this.renderToolErrorsTable(data);

      // Update most error-prone card and overall health
      if (data.tools && data.tools.length > 0) {
        const mostErrorProne = [...data.tools].sort((a, b) => b.error_rate - a.error_rate)[0];
        this.summaryCards.mostErrorProne = {
          name: mostErrorProne.tool_name,
          value: mostErrorProne.error_rate,
          metric: '% errors'
        };

        // Calculate overall health (average error rate)
        const avgErrorRate = data.tools.reduce((sum, t) => sum + t.error_rate, 0) / data.tools.length;
        if (avgErrorRate < 5) {
          this.summaryCards.overallHealth = 'good';
        } else if (avgErrorRate < 20) {
          this.summaryCards.overallHealth = 'warning';
        } else {
          this.summaryCards.overallHealth = 'critical';
        }
      } else {
        this.summaryCards.overallHealth = 'good';
      }
    },
    async loadToolChains() {
      const response = await fetch(
        `{{ root_path }}/admin/observability/tools/chains?hours=${this.timeRange}&limit=${this.limit}`
      );
      if (!response.ok) throw new Error('Failed to load tool chains');
      const data = await response.json();
      this.renderToolChainsTable(data);
    },
    async loadToolSlowness() {
      const response = await fetch(
        `{{ root_path }}/admin/observability/tools/performance?hours=${this.timeRange}&limit=10`
      );
      if (!response.ok) throw new Error('Failed to load tool slowness');
      const data = await response.json();
      this.renderToolSlownessChart(data);
    },
    async loadToolErrorProne() {
      const response = await fetch(
        `{{ root_path }}/admin/observability/tools/errors?hours=${this.timeRange}&limit=10`
      );
      if (!response.ok) throw new Error('Failed to load tool errors');
      const data = await response.json();
      this.renderToolErrorProneChart(data);
    },
    renderToolUsageChart(data) {
      const ctx = document.getElementById('toolUsageChart');
      if (!ctx) return;

      if (this.charts.toolUsage) {
        this.charts.toolUsage.destroy();
      }

      // Handle empty data
      if (!data.tools || data.tools.length === 0) {
        ctx.getContext('2d').clearRect(0, 0, ctx.width, ctx.height);
        return;
      }

      this.charts.toolUsage = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: data.tools.map(t => t.tool_name),
          datasets: [
            {
              label: 'Invocation Count',
              data: data.tools.map(t => t.count),
              backgroundColor: 'rgba(59, 130, 246, 0.6)',
              borderColor: '#3b82f6',
              borderWidth: 1,
            },
          ],
        },
        options: {
          indexAxis: 'y',
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: `Tool Usage Frequency (Last ${this.timeRange}h)`,
            },
            legend: {
              display: false,
            },
            tooltip: {
              callbacks: {
                label: function (context) {
                  const tool = data.tools[context.dataIndex];
                  return [
                    `Invocations: ${tool.count}`,
                    `Percentage: ${tool.percentage}%`
                  ];
                },
              },
            },
          },
          scales: {
            x: {
              beginAtZero: true,
              title: {
                display: true,
                text: 'Number of Invocations',
              },
            },
          },
        },
      });
    },
    renderToolPerformanceTable(data) {
      const tbody = document.querySelector('#toolPerformanceTable tbody');
      if (!tbody) return;

      tbody.innerHTML = data.tools
        .map(
          (tool, idx) => `
            <tr>
              <td class="px-4 py-2 text-sm text-gray-700">${idx + 1}</td>
              <td class="px-4 py-2 text-sm font-mono text-gray-900">${tool.tool_name}</td>
              <td class="px-4 py-2 text-sm text-gray-600">${tool.count}</td>
              <td class="px-4 py-2 text-sm text-orange-600 font-medium">${tool.avg_duration_ms} ms</td>
              <td class="px-4 py-2 text-sm text-green-600">${tool.min_duration_ms} ms</td>
              <td class="px-4 py-2 text-sm text-blue-600">${tool.p50} ms</td>
              <td class="px-4 py-2 text-sm text-indigo-600">${tool.p90} ms</td>
              <td class="px-4 py-2 text-sm text-purple-600">${tool.p95} ms</td>
              <td class="px-4 py-2 text-sm text-pink-600">${tool.p99} ms</td>
              <td class="px-4 py-2 text-sm text-red-600">${tool.max_duration_ms} ms</td>
            </tr>
          `
        )
        .join('');
    },
    renderToolErrorsTable(data) {
      const tbody = document.querySelector('#toolErrorsTable tbody');
      if (!tbody) return;

      tbody.innerHTML = data.tools
        .map(
          (tool, idx) => `
            <tr>
              <td class="px-4 py-2 text-sm text-gray-700">${idx + 1}</td>
              <td class="px-4 py-2 text-sm font-mono text-gray-900">${tool.tool_name}</td>
              <td class="px-4 py-2 text-sm text-gray-600">${tool.total_count}</td>
              <td class="px-4 py-2 text-sm text-red-600 font-medium">${tool.error_count}</td>
              <td class="px-4 py-2 text-sm text-red-700 font-bold">${tool.error_rate}%</td>
            </tr>
          `
        )
        .join('');
    },
    renderToolChainsTable(data) {
      const tbody = document.querySelector('#toolChainsTable tbody');
      if (!tbody) return;

      tbody.innerHTML = data.chains
        .map(
          (chain, idx) => `
            <tr>
              <td class="px-4 py-2 text-sm text-gray-700">${idx + 1}</td>
              <td class="px-4 py-2 text-sm font-mono text-gray-900">${chain.chain}</td>
              <td class="px-4 py-2 text-sm text-blue-600 font-medium">${chain.count}</td>
            </tr>
          `
        )
        .join('');
    },
    renderToolSlownessChart(data) {
      const ctx = document.getElementById('toolSlownessChart');
      if (!ctx) return;

      if (this.charts.toolSlowness) {
        this.charts.toolSlowness.destroy();
      }

      // Handle empty data
      if (!data.tools || data.tools.length === 0) {
        ctx.getContext('2d').clearRect(0, 0, ctx.width, ctx.height);
        return;
      }

      // Sort by p95 descending and take top 10
      const sortedTools = [...data.tools]
        .sort((a, b) => b.p95 - a.p95)
        .slice(0, 10);

      this.charts.toolSlowness = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: sortedTools.map(t => t.tool_name),
          datasets: [
            {
              label: 'p95 Latency (ms)',
              data: sortedTools.map(t => t.p95),
              backgroundColor: 'rgba(239, 68, 68, 0.6)',
              borderColor: '#ef4444',
              borderWidth: 1,
            },
            {
              label: 'p50 Latency (ms)',
              data: sortedTools.map(t => t.p50),
              backgroundColor: 'rgba(59, 130, 246, 0.6)',
              borderColor: '#3b82f6',
              borderWidth: 1,
            },
          ],
        },
        options: {
          indexAxis: 'y',
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: `Top 10 Slowest Tools (Last ${this.timeRange}h)`,
            },
            legend: {
              display: true,
              position: 'top',
            },
            tooltip: {
              callbacks: {
                label: function (context) {
                  const tool = sortedTools[context.dataIndex];
                  return [
                    `${context.dataset.label}: ${context.parsed.x} ms`,
                    `Avg: ${tool.avg_duration_ms} ms`,
                    `Max: ${tool.max_duration_ms} ms`,
                    `Invocations: ${tool.count}`
                  ];
                },
              },
            },
          },
          scales: {
            x: {
              beginAtZero: true,
              title: {
                display: true,
                text: 'Latency (ms)',
              },
            },
          },
        },
      });
    },
    renderToolErrorProneChart(data) {
      const ctx = document.getElementById('toolErrorProneChart');
      if (!ctx) return;

      if (this.charts.toolErrorProne) {
        this.charts.toolErrorProne.destroy();
      }

      // Handle empty data
      if (!data.tools || data.tools.length === 0) {
        ctx.getContext('2d').clearRect(0, 0, ctx.width, ctx.height);
        return;
      }

      // Sort by error_rate descending and take top 10
      const sortedTools = [...data.tools]
        .filter(t => t.error_rate > 0)
        .sort((a, b) => b.error_rate - a.error_rate)
        .slice(0, 10);

      if (sortedTools.length === 0) {
        ctx.getContext('2d').clearRect(0, 0, ctx.width, ctx.height);
        const parent = ctx.parentElement;
        parent.innerHTML = '<p style="text-align: center; color: #10b981; padding: 2rem;">✓ No errors found - all tools operating normally!</p>';
        return;
      }

      this.charts.toolErrorProne = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: sortedTools.map(t => t.tool_name),
          datasets: [
            {
              label: 'Error Rate (%)',
              data: sortedTools.map(t => t.error_rate),
              backgroundColor: 'rgba(239, 68, 68, 0.6)',
              borderColor: '#ef4444',
              borderWidth: 1,
            },
          ],
        },
        options: {
          indexAxis: 'y',
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: `Top 10 Error-Prone Tools (Last ${this.timeRange}h)`,
            },
            legend: {
              display: false,
            },
            tooltip: {
              callbacks: {
                label: function (context) {
                  const tool = sortedTools[context.dataIndex];
                  return [
                    `Error Rate: ${tool.error_rate}%`,
                    `Errors: ${tool.error_count}`,
                    `Total: ${tool.total_count}`,
                    `Success: ${tool.total_count - tool.error_count}`
                  ];
                },
              },
            },
          },
          scales: {
            x: {
              beginAtZero: true,
              max: 100,
              title: {
                display: true,
                text: 'Error Rate (%)',
              },
            },
          },
        },
      });
    },
    startAutoRefresh() {
      setInterval(() => this.loadAllMetrics(), 60000);
    },
    async applyFilters() {
      await this.loadAllMetrics();
    },
  };
};
</script>

<div class="tools-dashboard" x-data="createToolsController()" x-init="init()">
  <!-- Header with filters -->
  <div class="mb-6 bg-white rounded-lg shadow-sm p-4">
    <div class="flex flex-wrap gap-4 items-end">
      <div class="flex-1 min-w-[200px]">
        <label class="block text-sm font-medium text-gray-700 mb-1">Time Range</label>
        <select x-model="timeRange" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
          <option value="1">Last 1 Hour</option>
          <option value="6">Last 6 Hours</option>
          <option value="24">Last 24 Hours</option>
          <option value="72">Last 3 Days</option>
          <option value="168">Last 7 Days</option>
        </select>
      </div>
      <div class="flex-1 min-w-[200px]">
        <label class="block text-sm font-medium text-gray-700 mb-1">Results Limit</label>
        <select x-model="limit" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
          <option value="10">Top 10</option>
          <option value="20">Top 20</option>
          <option value="50">Top 50</option>
          <option value="100">Top 100</option>
        </select>
      </div>
      <div class="flex-shrink-0">
        <button @click="applyFilters()" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
          Apply Filters
        </button>
      </div>
    </div>
    <div x-show="loading" class="mt-3 text-sm text-gray-600">
      Loading tool metrics...
    </div>
    <div x-show="error" class="mt-3 text-sm text-red-600" x-text="error"></div>
  </div>

  <!-- Summary Cards -->
  <div class="mb-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <!-- Overall Health Card -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4" :class="{
      'border-green-500': summaryCards.overallHealth === 'good',
      'border-yellow-500': summaryCards.overallHealth === 'warning',
      'border-red-500': summaryCards.overallHealth === 'critical'
    }">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm font-medium text-gray-600">Overall Health</p>
          <p class="mt-2 text-3xl font-bold" :class="{
            'text-green-600': summaryCards.overallHealth === 'good',
            'text-yellow-600': summaryCards.overallHealth === 'warning',
            'text-red-600': summaryCards.overallHealth === 'critical'
          }" x-text="summaryCards.overallHealth === 'good' ? '🟢 Healthy' : summaryCards.overallHealth === 'warning' ? '🟡 Warning' : '🔴 Critical'"></p>
        </div>
      </div>
    </div>

    <!-- Most Used Tool Card -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
      <div class="flex items-center justify-between">
        <div class="flex-1 min-w-0">
          <p class="text-sm font-medium text-gray-600">Most Used Tool</p>
          <p class="mt-2 text-lg font-semibold text-gray-900 truncate" x-text="summaryCards.mostUsed?.name || 'N/A'"></p>
          <p class="text-sm text-blue-600 font-medium" x-text="summaryCards.mostUsed ? `${summaryCards.mostUsed.value} ${summaryCards.mostUsed.metric}` : ''"></p>
        </div>
        <div class="text-3xl">📊</div>
      </div>
    </div>

    <!-- Slowest Tool Card -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-orange-500">
      <div class="flex items-center justify-between">
        <div class="flex-1 min-w-0">
          <p class="text-sm font-medium text-gray-600">Slowest Tool</p>
          <p class="mt-2 text-lg font-semibold text-gray-900 truncate" x-text="summaryCards.slowest?.name || 'N/A'"></p>
          <p class="text-sm text-orange-600 font-medium" x-text="summaryCards.slowest ? `${summaryCards.slowest.value} ${summaryCards.slowest.metric}` : ''"></p>
        </div>
        <div class="text-3xl">🐌</div>
      </div>
    </div>

    <!-- Most Error-Prone Tool Card -->
    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-red-500">
      <div class="flex items-center justify-between">
        <div class="flex-1 min-w-0">
          <p class="text-sm font-medium text-gray-600">Most Error-Prone</p>
          <p class="mt-2 text-lg font-semibold text-gray-900 truncate" x-text="summaryCards.mostErrorProne?.name || 'None'"></p>
          <p class="text-sm text-red-600 font-medium" x-text="summaryCards.mostErrorProne ? `${summaryCards.mostErrorProne.value}${summaryCards.mostErrorProne.metric}` : '0% errors'"></p>
        </div>
        <div class="text-3xl">⚠️</div>
      </div>
    </div>
  </div>

  <!-- Tool Usage Chart -->
  <div class="mb-6 bg-white rounded-lg shadow-sm p-6">
    <div style="height: 400px;">
      <canvas id="toolUsageChart"></canvas>
    </div>
  </div>

  <!-- Top 10 Slowest Tools Chart -->
  <div class="mb-6 bg-white rounded-lg shadow-sm p-6">
    <div style="height: 400px;">
      <canvas id="toolSlownessChart"></canvas>
    </div>
  </div>

  <!-- Top 10 Error-Prone Tools Chart -->
  <div class="mb-6 bg-white rounded-lg shadow-sm p-6">
    <div style="height: 400px;">
      <canvas id="toolErrorProneChart"></canvas>
    </div>
  </div>

  <!-- Tool Performance Table -->
  <div class="mb-6 bg-white rounded-lg shadow-sm p-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-4">Tool Performance Metrics</h3>
    <div class="overflow-x-auto">
      <table id="toolPerformanceTable" class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tool Name</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Count</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Min</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">p50</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">p90</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">p95</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">p99</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Max</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200"></tbody>
      </table>
    </div>
  </div>

  <!-- Tool Error Rates Table -->
  <div class="mb-6 bg-white rounded-lg shadow-sm p-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-4">Tool Error Rates</h3>
    <div class="overflow-x-auto">
      <table id="toolErrorsTable" class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tool Name</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Count</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Error Count</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Error Rate</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200"></tbody>
      </table>
    </div>
  </div>

  <!-- Tool Chains Table -->
  <div class="mb-6 bg-white rounded-lg shadow-sm p-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-4">Common Tool Chains</h3>
    <p class="text-sm text-gray-600 mb-4">Tools frequently invoked together in the same trace</p>
    <div class="overflow-x-auto">
      <table id="toolChainsTable" class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tool Chain</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Frequency</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200"></tbody>
      </table>
    </div>
  </div>
</div>
